<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<title>기본 예제</title>
<meta name="class-lists" content="jindo.AjaxHistory"/>
<meta name="screenshots" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="가장 기본적인 사용 예제입니다.">
<link rel="stylesheet" type="text/css" href="../asset/demo.css">
<style type="text/css">
	
</style>
</head>
<body>
<script type="text/javascript" src="../asset/demojs/demo.js#header"
     data-title="Jindo Component"
     data-subtitle="=document.title"
     data-backbutton="false"
     data-viewsource="false"
     data-qrcode="true"></script>

<div class="demo">
	<pre>
- 아래 3개의 셀렉트박스 값을 하나씩 변경
- 셀렉트박스의 값이 변경되는 시점에 changeStatus()함수를 호출하며 해당 함수에서는 oAjaxHistoryInstance.setData()를 호출
- oAjaxHistoryInstance.setData()를 호출하며 넘긴 3개 셀렉트박스의 값을 History Data로 저장
- 데이터가 저장되며 브라우저에 로케이션이 변경되었음을 알림
- 사용자가 브라우저의 앞으로/뒤로가기 버튼을 누를 경우, 저장된 History Data를 가져와서 onChange 이벤트를 발생시킴
- onChange 이벤트의 핸들러로 지정된 함수가 호출되며, 파라미터로 저장했던 History Data를 받을 수 있음
- 넘겨받은 History Data를 이용하여 셀렉트박스의 선택값을 변경하고 디버그박스에 값을 출력
- Reset 버튼을 누를 경우, 히스토리 데이터를 초기화 함
- getPermanentLink 버튼을 누를 경우, 현재 화면 상태에 대한 고유 링크를 얻을 수 있음
	</pre>

	<select id="type1" onChange="changeStatus()">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
		<option value="6">6</option>
	</select>
	<select id="type2" onChange="changeStatus()">
		<option value="a">a</option>
		<option value="b">b</option>
		<option value="c">c</option>
		<option value="d">d</option>
		<option value="e">e</option>
		<option value="f">f</option>
	</select>
	<select id="type3" onChange="changeStatus()">
		<option value="금강산">금강산</option>
		<option value="백두산">백두산</option>
		<option value="태백산">태백산</option>
		<option value="소백산">소백산</option>
		<option value="북한산">북한산</option>
		<option value="남산">남산</option>
	</select>
	<input type="button" value="Reset" onclick="location.href=location.pathname;">
	<textarea id="elDebug" style="width:100%;height:500px"></textarea>
</div>

<script type="text/javascript" charset="utf-8" src="../../asset/jindo.desktop.all.ns.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Component.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.AjaxHistory.js"></script>
<script type="text/javascript">
	function debug(sMessage){
		jindo.$('elDebug').value += decodeURIComponent(sMessage)+"\n";
		jindo.$('elDebug').scrollTop = 5000;
	}

	function changeStatus(){
		oAjaxHistoryInstance.addHistory(
			{
				'type1' : jindo.$('type1').value,
				'type2' : jindo.$('type2').value,
				'type3' : encodeURIComponent(jindo.$('type3').value)
			}
		);
	}

	var oAjaxHistoryInstance;
	jindo.$Fn(function(){
		oAjaxHistoryInstance = new jindo.AjaxHistory({
			sIFrameUrl : "history.html"
		});
		oAjaxHistoryInstance.attach("change", function(htData){
			jindo.$('type1').value = htData.htHistoryData.type1;
			jindo.$('type2').value = htData.htHistoryData.type2;
			jindo.$('type3').value = decodeURIComponent(htData.htHistoryData.type3);
			debug("change event : "+jindo.$Json(htData).toString());
		});
		oAjaxHistoryInstance.attach("load", function(htData){
			changeStatus();
			debug("load event");
		});
		oAjaxHistoryInstance.initialize();
	}).attach(window, "load");
</script>
<script type="text/javascript" src="../asset/demojs/demo.js#footer"></script>
</body>
</html>
